<html>

<head>
    <!-- bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <!-- bootstrap -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="./public/swiper-bundle.min.css">
    <script src="./public/swiper-bundle.min.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <!-- top -->
        <div class="topbox">
            <div>
                <img src="./img/index/logo.png" alt="" class="logoimg">
            </div>
            <div class="position">
                <img src="./img/index/dingwei.png" alt="" class="img-fluid"
                    style="width: 30px;height: 30px;margin-top: 10px;">
                <div>4499巴顿巷罗利，NC<br>7603</div>
            </div>
            <div class="position">
                <img src="./img/index/phone.png" alt="" class="img-fluid"
                    style="width: 30px;height: 30px;margin-top: 10px;">
                <div>+1800-123-4567<br>+1800-123-4567</div>
            </div>
            <div>
                <button class="topbut">预约</button>
            </div>
        </div>
        <!-- top -->
        <!-- 轮播图导航栏 -->
        <div class="bigbox">
            <!-- 轮播图 -->
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" style="position: relative;">
                        <img src="./img/index/bgone (1).jpg" alt="" style="width: 100%;">
                        <div class="swiperbox">
                            <p class="swiperp">我们关心的健康</p>
                            <p>具有服务专业知识的合格员工.</p>
                            <button class="topbut">预约</button>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <img src="./img/index/bgone (1).jpg" alt="" style="width: 100%;">

                    </div>
                    <div class="swiper-slide">
                        <img src="./img/index/bgone (1).jpg" alt="" style="width: 100%;">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="leftright">
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
                <!-- 如果需要滚动条 -->
                <div class="swiper-pagination"></div>
            </div>
            <!-- 轮播图 -->
            <!-- 导航栏 -->
            <div class="navbox">
                <div class="nav">
                    <ul><a href="./index.html">家</a></ul>
                    <ul><a href="./aboutus.html">关于我们</a></ul>
                    <ul class="navul">
                        <a style="color: #83A3E5;">服务业</a>
                        <div class="navlist">
                            <li><a href="./service.html">服务列表</a></li>
                            <li><a href="./service_list.html">服务-单人</a></li>
                        </div>
                    </ul>
                    <ul><a href="./blog.html">博客</a></ul>
                    <ul class="navul2">
                        <a style="color: #83A3E5;">特征</a>
                        <div class="navlist2">
                            <li><a href="./gallery.html">画廊</a></li>
                            <li><a href="./test.html">测试</a></li>
                        </div>
                    </ul>
                    <ul><a href="./callus.html">联系我们</a></ul>
                </div>
                <div class="telmenu">
                    <div class="telbox">
                        <div>菜单</div>
                        <div>
                            <img src="./img/index/menu.png" alt="" class="telboximg">
                        </div>
                    </div>
                    <div class="menu">
                        <ul><a href="./index.html">家</a></ul>
                        <ul><a href="./aboutus.html">关于我们</a></ul>
                        <ul>
                            <span class="menuul">服务业</span>
                            <div class="menulist">
                                <li><a href="./service_list.html">服务列表</a></li>
                                <li><a href="./service.html">服务-单人</a></li>
                            </div>
                        </ul>
                        <ul><a href="./blog.html">博客</a></ul>
                        <ul><span class="menuul2">特征</span>
                            <div class="menulist2">
                                <li><a href="./gallery.html">画廊</a></li>
                                <li><a href="./test.html">测试</a></li>
                            </div>
                        </ul>
                        <ul><a href="./callus.html">联系我们</a></ul>
                    </div>
                </div>
            </div>
            <!-- 导航栏 -->
        </div>
        <!-- 轮播图导航栏 -->
    </div>
    <!-- 头部 -->
</body>

<script>
    // 轮播图
    var mySwiper = new Swiper('.swiper', {
        direction: 'horizontal', // 水平切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
            clickable: true,
        },
        // 其他配置选项...
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    })
    // 轮播图
    // 点击菜单显示隐藏
    $(document).ready(function () {
        $(".telboximg").click(function () {
            $(".menu").toggle();
        });
    });
    // 点击菜单显示隐藏
    //   点击列表显示隐藏
    $(document).ready(function () {
        $(".navul").click(function () {
            $(".navlist").fadeToggle("slow");
        })
    });
    $(document).ready(function () {
        $(".navul2").click(function () {
            $(".navlist2").fadeToggle("slow");
        })
    });
    $(document).ready(function () {
        $(".menuul").click(function () {
            $(".menulist").fadeToggle("slow");
        })
    });
    $(document).ready(function () {
        $(".menuul2").click(function () {
            $(".menulist2").fadeToggle("slow");
        })
    })
//   点击列表显示隐藏
</script>

</html>
<style>
    .header {
        width: 100%;
    }

    .topbox {
        width: 70%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        box-sizing: border-box;
    }

    .position {
        display: flex;
        margin-top: 10px;
    }

    .topbut {
        padding: 15px;
        margin-top: 10px;
        background-color: #25ABE1;
        color: white;
        border: none;
        border-radius: 10px;
    }

    .bigbox {
        position: relative;
    }

    .navbox {
        width: 100%;
        height: 70px;
        background-color: #133575;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
    }

    .nav {
        width: 70%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        color: white;
        line-height: 70px;
    }

    .telmenu {
        display: none;
    }

    .nav>ul {
        width: 16%;
        text-align: center;
        border-left: solid 1px #0A2969;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .nav>ul>li>a {
        text-decoration: none;
        color: #83A3E5;
    }

    .nav>ul:last-child {
        border-right: #0A2969 solid 1px;
    }

    .navul {
        position: relative;
        cursor: pointer;
    }

    .navlist {
        display: none;
        position: absolute;
        width: 100%;
        background-color: #102759;
        top: 70px;
        left: 0;
    }

    .navul2 {
        position: relative;
        cursor: pointer;
    }

    .navlist2 {
        display: none;
        position: absolute;
        width: 100%;
        background-color: #102759;
        top: 70px;
        left: 0;
    }

    .swiperbox {
        color: white;
        font-weight: bold;
        position: absolute;
        top: 30%;
        left: 20%;
        z-index: 999;
    }

    .swiperp {
        font-size: 30px;
    }

    /* 响应1024px */
    @media screen and (max-width:1025px) {
        .topbox {
            width: 100%;
            margin-top: 0;
        }

        .logoimg {
            width: 80%;
        }

        .position {
            display: none;
        }

        .topbut {
            display: none;
        }

        .navbox {
            height: 35px;
            line-height: 35px;
        }

        .telmenu {
            display: block;
            background-color: #133575;
        }

        .telbox {
            color: white;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
        }

        .telboximg {
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

        .nav>ul {
            display: none;
        }

        .menu {
            display: none;
            width: 100%;
            background-color: #133575;
            color: white;
        }

        .menu a {
            text-decoration: none;
            color: white;
        }

        .menulist {
            display: none;
            padding-left: 10px;
            box-sizing: border-box;
            border-bottom: #082966;
        }

        .menulist2 {
            display: none;
            padding-left: 10px;
            box-sizing: border-box;
            border-bottom: #082966;
        }

        .menu>ul {
            border-top: 1px solid #092868;
            margin: 0;
            padding: 0 20px;
            list-style: none;
        }
    }


    /* 响应350px */
    @media screen and (max-width: 351px) {
        .topbox {
            width: 100%;
            margin-top: 0;
        }

        .logoimg {
            width: 40%;
        }

        .position {
            display: none;
        }

        .topbut {
            display: none;
        }

       .leftright{
        display: none;
       }

        .navbox {
            height: 35px;
            line-height: 35px;
        }

        .telmenu {
            display: block;
            background-color: #133575;
        }

        .telbox {
            color: white;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
        }

        .telboximg {
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

        .nav>ul {
            display: none;
        }

        .menu {
            display: none;
            width: 100%;
            background-color: #133575;
            color: white;
        }

        .menu a {
            text-decoration: none;
            color: white;
        }

        .menulist {
            display: none;
            padding-left: 10px;
            box-sizing: border-box;
            border-bottom: #082966;
        }

        .menulist2 {
            display: none;
            padding-left: 10px;
            box-sizing: border-box;
            border-bottom: #082966;
        }

        .menu>ul {
            border-top: 1px solid #092868;
            margin: 0;
            padding: 0 20px;
            list-style: none;
        }
    }

    /* 响应350px */
</style>